<template>
	<a-card title="">
		<a-form layout="inline">
			<a-form-item>
				<a-select v-model="listQuery.select_value" style="width: 120px">
					<a-select-option value="全部">全部</a-select-option>
					<a-select-option value="name">试卷名称</a-select-option>
					<a-select-option value="title">试卷标题</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item><a-input-search enterButton @search="onSearch" /></a-form-item>
		</a-form>
		<a-table :columns="columns" :dataSource="data" bordered rowKey="id" :pagination="false">
			<template slot="name" slot-scope="text">
				<a href="javascript:;">{{ text }}</a>
			</template>
			<template slot="hascompletion" slot-scope="text">
				<a-tag color="pink" v-if="text == 0">机器改卷</a-tag>
				<a-tag color="blue" v-else>需人工改卷</a-tag>
			</template>
			<template slot="action" slot-scope="text, record, index">
				<a-button type="primary" @click="editExam(record.id)">导出数据</a-button>
			</template>
		</a-table>
		<a-pagination
			showSizeChanger
			:pageSize.sync="listQuery.page_size"
			:pageSizeOptions="pagesizeoptions"
			@showSizeChange="onShowSizeChange"
			:total="listQuery.total"
			v-model="listQuery.page_number"
		/>
		<a-modal v-model="modal2Visible" title="选择导出属性" onOk="handleOk">
			<template slot="footer">
				<a-button key="submit" type="primary" :loading="loading" @click="handleOk">导出</a-button>
			</template>
			<a-tree
				checkable
				@expand="onExpand"
				:expandedKeys="expandedKeys"
				:autoExpandParent="autoExpandParent"
				v-model="checkedKeys"
				@select="onSelect"
				:selectedKeys="selectedKeys"
				:treeData="treeData"
				:defaultCheckedKeys="['0']"
			/>
		</a-modal>
	</a-card>
</template>

<script>
import { GetExam, GetEds, GetSubPro, ActionExam, DataExport } from '@/api/exam';
import Moment from 'moment';
import ExportJsonExcel from 'js-export-excel';
const plainOptions = ['单选', '多选', '判断', '问答'];
const treeData = [
	{
		title: '数据属性',
		key: '0',
		disableCheckbox: true,
		children: [
			{ title: '考试名称', key: 'examname', disableCheckbox: true },
			{ title: '试卷标题', key: 'examtitle', disableCheckbox: true },
			{ title: '考生姓名', key: 'username', disableCheckbox: true },
			{ title: '考生工号', key: 'userworkno', disableCheckbox: true },
			{ title: '考生最高分', key: 'maxfraction', disableCheckbox: true },
			{ title: '考生参考次数', key: 'userckcs', disableCheckbox: true }
		]
	}
];
export default {
	components: {},
	data() {
		return {
			expandedKeys: ['0'],
			autoExpandParent: true,
			checkedKeys: ['0', 'examname', 'examtitle', 'username', 'userworkno', 'maxfraction', 'userckcs'],
			selectedKeys: ['0'],
			treeData,
			pagesizeoptions: ['20', '50', '200', '5000'],
			plainOptions: plainOptions,
			loading: false,
			modal2Visible: false,
			data: [],
			columns: [
				{
					title: 'ID',
					dataIndex: 'id',
					align: 'center'
				},
				{
					title: '试卷名称',
					dataIndex: 'name',
					scopedSlots: { customRender: 'name' },
					align: 'center'
				},
				{
					title: '试卷标题',
					dataIndex: 'title',
					scopedSlots: { customRender: 'name' },
					align: 'center'
				},
				{
					title: '考试时间(分)',
					dataIndex: 'time',
					align: 'center'
				},
				{
					title: '开始日期',
					dataIndex: 'stime',
					align: 'center'
				},
				{
					title: '结束日期',
					dataIndex: 'etime',
					align: 'center'
				},
				{
					title: '改卷方式',
					dataIndex: 'hascompletion',
					align: 'center',
					scopedSlots: { customRender: 'hascompletion' }
				},
				{
					title: '操作',
					dataIndex: 'display',
					key: 'x',
					scopedSlots: { customRender: 'action' },
					align: 'center'
				}
			],
			listQuery: {
				page_size: 20,
				page_number: 1,
				order_column: 1,
				order_dir: 'asc',
				search_value: '',
				select_value: '全部',
				total: 0
			},
			exportData: [],
			currentexamid: 0
		};
	},
	beforeCreate() {
		this.form = this.$form.createForm(this);
	},
	methods: {
		comExport() {
			let keys = this.checkedKeys;
			this.delArrayByValue(keys, '0');
			this.delArrayByValue(keys, '1');
			this.delArrayByValue(keys, '2');
			DataExport({ props: keys, examid: this.currentexamid }).then(res => {
				this.exportData = res.data;
				if (this.exportData.length > 0) {
					this.loading = true;
					this.downData();
				} else {
					this.$notification['warning']({
						message: '温馨提示',
						description: '此次考试暂无人员参加,没有数据可用导出!'
					});
				}
			});
		},
		downData() {
			var option = {};
			let dataTable = this.exportData;
			option.fileName = 'examdata';
			option.datas = [
				{
					sheetData: dataTable,
					sheetName: 'sheet',
					sheetFilter: ['examname', 'examtitle', 'username', 'userworkno', 'maxfraction', 'userckcs'],
					sheetHeader: ['考试名称', '试卷标题', '考生姓名', '考生工号', '考生最高分', '考生参考次数']
				}
			];
			var toExcel = new ExportJsonExcel(option);
			toExcel.saveExcel();
			setTimeout(() => {
				this.loading = false;
			}, 3000);
		},
		delArrayByValue(arr, num) {
			arr.forEach(function(item, index, array) {
				if (item === num) {
					arr.splice(index, 1);
				}
			});
			if (arr.indexOf(num) !== -1) del(arr, num);
		},
		onExpand(expandedKeys) {
			this.expandedKeys = expandedKeys;
			this.autoExpandParent = false;
		},
		onCheck(checkedKeys) {
			this.checkedKeys = checkedKeys;
		},
		onSelect(selectedKeys, info) {
			this.selectedKeys = selectedKeys;
		},
		onShowSizeChange(current, pageSize) {
			this.listQuery.page_size = pageSize;
			this.listQuery.page_number = current;
			this.initTable();
		},
		onSearch(value) {
			this.listQuery.search_value = value;
			this.initTable();
		},
		initTable() {
			var _this = this;
			GetExam(this.listQuery).then(res => {
				_this.data = res.data;
				_this.listQuery.total = res.recordsTotal;
			});
		},
		handleProvinceChange(value) {
			this.pRo = this.pRos[value];
			this.form.setFieldsValue({
				projectid: null
			});
		},
		editExam(code) {
			this.currentexamid = code;
			this.modal2Visible = true;
		},
		hasTypeList(details) {
			var list = [];
			if (details.dxsize > 0) {
				list.push('单选');
			}
			if (details.dxxsize > 0) {
				list.push('多选');
			}
			if (details.pdsize > 0) {
				list.push('判断');
			}
			if (details.tksize > 0) {
				list.push('问答');
			}
			return list;
		},
		showModal() {
			this.modal2Visible = true;
		},
		handleOk(e) {
			this.comExport();
		},
		handleCancel(e) {
			this.modal2Visible = false;
		}
	},
	mounted() {
		this.initTable();
	},
	watch: {
		checkedKeys(val) {}
	}
};
</script>

<style>
.ant-advanced-search-form {
	padding: 24px;
	background: #fbfbfb;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
	display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
	flex: 1;
}

#components-form-demo-advanced-search .ant-form {
	max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
	margin-top: 16px;
	border: 1px dashed #e9e9e9;
	border-radius: 6px;
	background-color: #fafafa;
	min-height: 200px;
	text-align: center;
	padding-top: 80px;
}
</style>
